<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        body {
            background: #f5f5f5;
        }

        .vueApp {
            overflow:visible;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
            background-color: #fff;
        }

        .box-search {
            background-color: rgba(90, 194, 255, 1);
            padding: 10px 15px;
        }

        .sort {
            width: 22px;
            height: 22px;
            min-width: 22px;
            margin-left: 24px;
        }

        .search {
            height: 30px;
            background: rgba(255, 255, 255, 0.26);
            border-radius: 20px;
        }

        .search-icon {
            width: 17px;
            height: 16px;
            margin-right: 6px;
        }

        .search-text {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .navs {
            height: 44px;
            background: rgba(90, 194, 255, 1);
            overflow-x: scroll;
        }

        .nav-default {
            width: fit-content;
            min-width: fit-content;
            padding: 0 20px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
        }

        .nav-active {
            width: fit-content;
            min-width: fit-content;
            padding: 0 20px;
            position: relative;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            overflow: visible;
        }

        .nav-active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -6px;
            width: 20px;
            height: 3px;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 1);
            border-radius: 2px;
        }

        .subnavs {
            position: relative;
            height: 50px;
            overflow-x: scroll;
            padding-top: 23px;
            background-color: #fff;
        }

        .line {
            height: 1px;
            background-color: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .subnav-default {
            width: fit-content;
            min-width: fit-content;
            padding: 0 20px;
            height: 16px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(90, 90, 90, 1);
            line-height: 15px;
            text-align: center;
        }

        .subnav-active {
            width: fit-content;
            min-width: fit-content;
            padding: 0 20px;
            position: relative;
            height: 15px;
            font-size: 17px;
            font-weight: 600;
            color: rgba(90, 194, 255, 1);
            line-height: 12px;
            text-align: center;
            overflow: visible;
        }

        .subnav-active::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 50%;
            width: 46px;
            height: 3px;
            transform: translateX(-50%);
            background: rgba(90, 194, 255, 1);
            border-radius: 2px;
        }

        .books {
            padding: 0 7.5px;
            flex-wrap: wrap;
        }

        .book {
            width: 33.333%;
            padding: 0 7.5px;
        }

        .image .main {
            width: 105px;
            height: 140px;
            margin: 15px auto 0 auto;
            background: rgba(77, 181, 216, 1);
            box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.16);
            border-radius: 5px;
            overflow: hidden;
        }
        .image {
            position: relative;
        }
        .image .point {
            position: absolute;
            top: 15px;
            left: 0;
            width: 41px;
            height: 41px;
            z-index: 9;
        }

        .title {
            width: 105px;
            height: 32px;
            margin: 8px auto 0 auto;
            font-size: 14px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .tips {
            margin-top: 70px;
            text-align: center;
        }

        .tips img {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }

        .tips span {
            font-size:12px;
            font-weight:400;
            color:rgba(128,128,128,1);
            line-height:17px;
        }

        .navs-two {
            overflow-x: scroll;
            padding-left: 15px;
            background-color: rgba(90, 194, 255, 1);
        }

        .navs-two .item {
            padding: 5px 10px;
            margin-bottom: 10px;
            border-radius: 15px;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            margin-right: 10px;
            min-width: fit-content;
        }

        .navs-two .active {
            background-color: #EDF8FF;
            color: #5AC2FF;
            font-weight: 500;
        }

        .box-stick {
            z-index: 999;
            /*position: -webkit-sticky;
            position: sticky;*/
            left: 0;
            top: 118px;
            width: 100%;
        }

        .kj-container {
            background-color: #F5F5F5;
            padding: 15px;
        }

        .kj-container .item {
            padding: 15px;
            background-color: #FFFFFF;
            border-radius: 10px;
            margin-top: 10px;
        }

        .kj-container .item:first-child {
            margin-top: 0;
        }

        .kj-container .kj-title {
            padding-right: 10px;
            font-size: 16px;
            font-weight: 500;
            color: #191919;
            overflow: hidden;
        }

        .kj-container .price {
            font-size: 14px;
            font-weight: 500;
            color: #FD9B43;
        }

        .kj-container .count {
            font-size: 12px;
            font-weight: 400;
            color: #808080;
            margin-top: 10px;
        }

        .kj-container .des {
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="fixed">
            <header class="navs" data-flex="cross:center main:center">
                <div :class="lev1Active == index ? 'nav-active' : 'nav-default'" v-for="item,index in navList" @click="lev1Active = index">
                    {{ item.name }}
                </div>
            </header>
            <div class="box-search" data-flex="cross:center">
                <div data-flex-box="1">
                    <div class="search" data-flex="main:center cross:center" @click="searchFn">
                        <div class="search-icon">
                            <img src="../../image/ui/search.png" alt="">
                        </div>
                        <div class="search-text">搜索</div>
                    </div>
                </div>
            </div>
        </div>
        <header style="height: 44px;box-sizing: content-box;"></header>
        <div style="height: 50px;"></div>
        <div class="navs-two" data-flex v-if="lev2List.length && lev2LoadEnd">
            <div class="item" :class="{'active': lev2Active == index}" v-for="item,index in lev2List" @click="lev2Active = index">{{item.name}}</div>
            <div style="min-width: 5px;"></div>
        </div>
        <carousel :type="type == 3 ? 9 : type == 4 ? 2 : 8"></carousel>
        <div class="box-stick" v-if="lev3List.length && lev3LoadEnd">
            <div class="subnavs" data-flex="main:left">
                <div :class="lev3Active == index ? 'subnav-active' : 'subnav-default'" v-for="item,index in lev3List"
                    @click="lev3Active = index">
                    {{ item.name }}
                </div>
            </div>
            <div class="line"></div>
        </div>
        <div class="books" v-if="type != 5 && loadEnd" data-flex>
            <div class="book" v-for="item in listData" @click="handleItem(item)">
                <div class="image">
                    <img class="point" v-if="type == 4 && (item.activeCode || item.active == 1)" src="../../image/ui/active.png" alt="">
                    <img class="point" v-else-if="type == 4" :src="'../../image/course/video-'+ item.point +'.png'" alt="">
                    <!-- <img class="main" :src="item.pic" alt=""> -->
                    <img :src="item.pbookPic || item.pic" alt="" class="main">
                </div>
                <div class="title">
                    {{ item.pbookName || item.name }}
                </div>
            </div>
        </div>
        <div class="kj-container" v-else-if="type == 5 && loadEnd">
            <div class="item" v-for="item in listData" @click="handleItem(item)">
                <div data-flex="cross:center">
                    <div class="kj-title" data-flex-box="1">
                        {{ item.courseWareName }}
                    </div>
                    <div class="price" v-if="item.payMethod == 2">{{item.payAmount}}积分</div>
                    <div class="price" v-else-if="item.payMethod == 1">免费</div>
                </div>
                <div class="count">课件数量：{{item.contentNum}}</div>
                <div class="des">{{item.signName}}</div>
            </div>
        </div>
        <!-- 身份提示 -->
        <div class="tips" v-show="memberTypeError">
            <img src="../../image/ui/membertype_tips.png" alt="">
            <span>抱歉,{{ memberTypeError == '1' ? '学生' : '老师' }}身份无法观看该分类下的视频</span>
        </div>
        <!-- 无视频提示 -->
        <div class="tips" v-show="loadEnd && !listData.length">
            <img src="../../image/ui/video_null.png" alt="">
            <span>抱歉,当前分类下没有数据</span>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/component/carousel.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var headerH;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        api.addEventListener({
            name: 'loginStatus'
        }, function () {
            vm.memberType = USER.Get('memberType', true);
            vm.navList = [];
            vm.listData = [];
            vm.lev2List = [];
            vm.lev3List = [];
            vm.lev1Active = '';
            vm.lev2Active = '';
            vm.lev3Active = '';
            findShowRangeByUserId();
        });
        api.addEventListener({
            name: "jumpToVideo"
        }, function() {
            vm.navList.forEach(function(item, index) {
                if(item.type == 4) {
                    vm.lev1Active = index;
                }
            });
        });
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 用户身份
                memberType: USER.Get('memberType', true),
                // 所有分类
                navList: [],
                // 二级分类
                lev2List: [],
                // 三级分类
                lev3List: [],
                // 一级导航选中
                lev1Active: '',
                // 二级导航选中
                lev2Active: '',
                // 三级导航选中
                lev3Active: '',
                // 列表数据
                listData: [],
                // 是否加载过数据
                loadEnd: false,
                lev2LoadEnd: false,
                lev3LoadEnd: false,
                pageSize: 100,
                memberTypeError: ""
            },
            computed: {
                type: function() {
                    if(typeof this.lev1Active == 'number') {
                        return this.navList[this.lev1Active].type;
                    }
                }
            },
            watch: {
                lev1Active: function() {
                    if(this.lev1Active !== '') {
                        vm.loadEnd = false;
                        vm.lev2LoadEnd = false;
                        vm.lev3LoadEnd = false;
                        var children = this.navList[this.lev1Active].children;
                        if(children.length < 1) {
                            getLev2NavList();
                        } else {
                            this.lev2List = children;
                            this.lev2Active = typeof this.lev2Active === 'string' ? 0 : '0';
                            vm.lev2LoadEnd = true;
                        }
                    }
                },
                lev2Active: function() {
                    if(this.lev2Active !== '') {
                        vm.loadEnd = false;
                        vm.lev3LoadEnd = false;
                        var scope = this.navList[this.lev1Active].children[this.lev2Active].scope;
                        if(vm.type == 4 && vm.memberType && vm.memberType != scope && scope != 3) {
                            vm.memberTypeError = vm.memberType;
                            return;
                        }
                        vm.memberTypeError = "";
                        var children = this.navList[this.lev1Active].children[this.lev2Active].children;
                        if(children.length < 1) {
                            getLev3NavList();
                        } else {
                            this.lev3List = children;
                            this.lev3Active = typeof this.lev3Active === 'string' ? 0 : '0';
                            vm.lev3LoadEnd = true;
                        }
                    }
                },
                lev3Active: function() {
                    if(vm.lev3Active !== '') {
                        vm.loadEnd = false;
                        getPageData('headerRefreshing');
                    }
                }
            }
        });
        findShowRangeByUserId();
        load();
    }

    // 判断当前用户是否可观看绘本或课件
    function findShowRangeByUserId() {
        var custId = USER.Get('custId', true);
        if(custId) {
            var params = {};
            var url = 'courseWare/findShowRangeByUserId';
            var callback = function(data) {
                vm.navList = [];
                if(data.isShowStuPicBook == 1) {
                    vm.navList.push({
                        name: "绘本",
                        children: [],
                        type: 3
                    });
                }
                vm.navList.push({
                    name: "视频",
                    children: [],
                    type: 4
                });
                if(data.isShowCourse == 1) {
                    vm.navList.push({
                        name: "课件",
                        children: [],
                        type: 5
                    });
                }
                vm.lev1Active = 0;
            };
            $S.POST(url, params, function(ret) {
                if(ret.status == 200) {
                    callback(ret.data);
                }
            });
        }else {
            vm.navList = [
            {
                name: "绘本",
                children: [],
                type: 3
            },{
                name: "视频",
                children: [],
                type: 4
            },{
                name: "课件",
                children: [],
                type: 5
            }];
            vm.lev1Active = 0;
        }
    }

    // 添加上拉加载和下拉刷新监听
    function load() {
        // fnAddHeaderRefreshingEvent(function() {
        //     getPageData('headerRefreshing');
        // });
        fnAddFooterLoadingEvent(function() {
            // getPageData('load');
        });
    }

    // 获取数据
    function getPageData(sign) {
        if(sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo ++;
        }
        var url = '';
        var params = {
            twoCategoryId: vm.lev3List[vm.lev3Active].id,
            pageNo: vm.pageNo,
            pageSize: vm.pageSize
        };
        var type = vm.type;
        if(type === 3) {
            url = 'stuPicture/findStuPictureBookList';
        } else if(type === 5) {
            url = 'courseWare/findCourseWareList';
        } else if(type === 4) {
            url = 'videos/findParductsByCategory';
            params = {
                videoCategoryId: vm.lev3List[vm.lev3Active].id,
                pageNo: vm.pageNo,
                pageSize: vm.pageSize
            }
        }
        var callback = function(data) {
            if(vm.pageNo == '1') {
                vm.listData = [];
            }
            vm.listData = vm.listData.concat(data.listData);
            vm.loadEnd = true;
            // status 为200时,只返回data
        };
        var error = function(res) {
            // status 不是200时,全部返回
            api.refreshHeaderLoadDone();
        };
        POST(url, params, callback, error);
    }

    // 是否登录
    function checkIsLogin() {
        var custId = USER.Get('custId', true);
        // if(!custId) {
        //     fnOpenWin({
        //         name: 'login',
        //         url: '../login/login.html'
        //     });
        // }
        return true;// !!custId;
    }

    // 获取二级分类数据
    function getLev2NavList() {
        var params = {
            type: vm.type
        };
        var url = 'courseWare/findTopCategoryList';
        var callback = function(data) {
            data.listData.forEach(function(item,index) {
                item.children = [];
            });
            vm.navList[vm.lev1Active].children = data.listData;
            vm.lev2List = data.listData;
            vm.lev2Active = typeof vm.lev2Active === 'string' ? 0 : '0';
            vm.lev2LoadEnd = true;
        };
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                callback(ret.data);
            }
        });
    }

    // 获取三级分类数据
    function getLev3NavList() {
        var params = {
            parentId: vm.lev2List[vm.lev2Active].id
        };
        var index1 = vm.lev1Active*1, index2 = vm.lev2Active*1;
        var url = 'courseWare/findChildCategoryList';
        var callback = function(data) {
            vm.navList[index1].children[index2].children = data.listData;
            vm.lev3List = data.listData;
            vm.lev3Active = typeof vm.lev3Active === 'string' ? 0 : '0';
            vm.lev3LoadEnd = true;
        };
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                callback(ret.data);
            }
        });
    }

    // 搜索
    function searchFn() {
        // if(!checkIsLogin()) return;
        fnOpenWin({
            name: 'class_search_win',
            url: '../class/class_search_win.html',
            pageParam: {
                type: vm.type - 1,
                lev2Id: vm.lev2List[vm.lev2Active].id
            }
        });
    }

    // 点击列表中的内容
    function handleItem(item) {
        // if(!checkIsLogin()) return;
        var custId = USER.Get('custId', true);
        if(vm.type == 3) {

            if(custId) {
                fnOpenPublicWin(item.pbookName, 'video/hb_detail', {
                    hbId: item.id
                });
            }else {
                fnToast('请先登录');
            }

        } else if(vm.type == 4) {
            fnOpenPublicWin(
                item.name,
                'video/detail',
                {
                    isBtn: true,
                    btnType: 'img',
                    btnName: 'ui/share',
                    headerFn: 'headerFn',
                    productsId: item.id,
                    scope: item.scope,
                    isSlidBack: false
                }
            )
        } else if(vm.type == 5) {
            if(custId) {
                fnOpenPublicWin(item.courseWareName, 'video/courseware_detail', {
                    kjId: item.id
                });
            }else {
                fnToast('请先登录');
            }
        }
    }
</script>

</html>